	<!-- 我的信息，更新查看页面 -->
	<template>
		<view class="bd">
			<view class="person-msg-all">

				<form @submit="formSubmit">

					<!--头像展示上传   头像传url-->
					<view class="person-pic-all" name='imgUrl'>
						<image :src="UserMsgList.avatarurl" class="person-pic"> </image>
						<view class="person-pic-text" @click="changePersonPic">更换头像></view>
					</view>
					<view class="line"></view>
					<view class="changeMsg" @click="ChangeIndex" v-if="changeIndex==0">修改</view>


					<view class="changeMsg" @click="ChangeIndex" v-else-if="changeIndex==1">确认</view>




					<view name='nickname'><text class="title">昵称：{{UserMsgList.nickname || ''}}</text>
						<input v-model="UserMsgList.nickname" placeholder="输入昵称" class="uni-input" v-if="changeIndex==1" />
					</view>

					<view><text class="title "><text class="input-left">性别：</text><text>{{userGender || ''}}</text></text>
						<radio-group name='gender' class="uni-input" v-on:change="handleGenderChange"
							v-if="changeIndex==1">

							<label>
								<radio value="1" v-model="MaleGender"><text>男</text></radio>
							</label>
                            <label>
                                <radio value="0" v-model="FemaleGender"><text>女</text></radio>
							</label>
						</radio-group>
					</view>




					<view style="display: flex;flex-direction: column;"><text
							class="title">城市（省份）：{{UserMsgList.province || ''}}-{{UserMsgList.city || ''}}</text>
						<view>

							<picker mode="region" @change="bindPickerChange" :value="index">
								<view class="uni-input" v-if="changeIndex==1">{{UserMsgList.province}}-{{UserMsgList.city}}
								</view>
							</picker>
						</view>
					</view>


					<view><text class="title">手机号：{{UserMsgList.userPhone || '未填写'}}</text>
						<input v-model="UserMsgList.userPhone" class="uni-input" v-if="changeIndex==1"
							placeholder="请输入手机号" />

					</view>
					<view><text class="title">生日：{{UserMsgList.userBirthday || '未填写'}}</text>
						<picker mode="date" @change="bindPickerBirth" :value="index">
							<view class="uni-input" v-if="changeIndex==1">{{birthDate}}</view>
						</picker>
					</view>
					<view><text class="title">兴趣爱好：{{UserMsgList.hobby || '未填写'}}</text>
						<input v-model="UserMsgList.hobby" placeholder="输入爱好" class="uni-input" v-if="changeIndex==1" />
					</view>

				</form>

			</view>


		</view>
	</template>
	<style>
		.line {
			height: 1rpx;
			background-color: rgb(235, 235, 235);
			width: 90%;
			margin: auto;
			margin-bottom: 10rpx;
		}

		.changeMsg {
			float: right;
			color: rgb(36, 103, 210);
		}

		.uni-input {
			margin: 20rpx;
			display: block;
			line-height: 60rpx;
			height: 60rpx;
			background-color: rgb(245, 245, 245);
		}

		.pickerCity {
			height: 100px;
			width: 100px;
		}

		.title {
			margin: 20rpx;
			line-height: 80rpx;
			height: 80rpx;
			font-weight: bold;


		}

		.person-pic-text {
			display: flex;
			align-items: center;
			right: 10rpx;
		}

		.person-pic {
			margin-left: 30rpx;
			margin-top: 30rpx;
			width: 130rpx;
			height: 130rpx;
			border-radius: 10%;
		}

		.person-pic-all {
			justify-content: space-between;
			display: flex;
			height: 200rpx;
		}

		.bd {
			width: 100%;
			margin: auto;
			height: 100%;
			background-color: rgb(245, 245, 245);
		}

		.person-msg-all {
			height: auto;
			width: 90%;
			margin: auto;
			background-color: white;
			border: 2rpx solid rgb(245, 245, 255);
			border-radius: 6%;
		}

		.uni-form-item .title {
			padding: 20rpx 0;
		}
	</style>
	<script>
		import {
			UploadImg
		} from '../../utils.js'
		import {
			getUserInfo,
			setUserInfo,
			commonUpload, //上传图片
		} from '@/config/api.js'
		export default {
			data() {
				return {
					UploadImg,
					//是否更改数据 0 否，1是
					changeIndex: 0,

					nickname: '',
					gender: -1,
					MaleGender: 1,
					FemaleGender: 0,

					phoneNumber: '',

					province: '',
					selectedProvinceIndex: 0,
					city: '',
					selectedCityIndex: 0,
					showPicker: false,

					imgUrl: {},
					imgUrlString: '', //获取图片上传后的url
					imgUrlArray: [],
					//生日属性
					birthDate: '',


					//兴趣爱好
					hobby: '',

					//id
					id: -1,

					//获取的用户信息
					UserMsgList: {

					},

					//要更新的用户信息
					updateUserDTO: {
						// nickname:'lihua'
					}
				}
			},
			onLoad() {
				console.log("id=" + this.$store.state.userInfo.id)
				const id = this.$store.state.userInfo.id;
				this.id = id;
				this.getUserInfoA();
			},
			computed: {
				userGender() {
					switch (this.UserMsgList.gender) {
						case 0:
							return '女';
						case 1:
							return '男';
					}
				},
			},
			methods: {
				// 性别
				handleGenderChange(event) {
					const selectedValue = event.detail.value;
					console.log(selectedValue);
					this.gender = selectedValue
				},
				// // 更换头像函数start
				changePersonPic() {
					var _that =  this;
					this.UploadImg().then(data => {
							console.log("获取到的图片资源为==》" + data)
							_that.imgUrl = JSON.parse(data).data
							console.log(typeof(_that.imgUrl)+_that.imgUrl)

							_that.imgUrlString = JSON.stringify(_that.imgUrl).split('[')[1].split(']')[0].replace(/"/g, '')
							console.log(_that.imgUrlString) //获取图片上传后的url
							_that.updateUserDTO.avatarurl = _that.imgUrlString

							_that.changeIndex = 1

							_that.updateUserDTO.avatarurl = _that.imgUrlString
							_that.ChangeIndex()

						})
						.catch(error => {

						})



				},

				//改变 是否修改
				async ChangeIndex() {
					var that = this
					if (this.changeIndex == 1) {
						that.changeIndex = 0
						//更改的确认按钮
						uni.showModal({
							content: '是否确认更改数据',
							success: async function(res) {
								if (res.confirm) {
									try {


										//undefined||?

										if (that.nickname !== that.UserMsgList.nickname) {
											that.updateUserDTO.nickname = that.UserMsgList.nickname
										}
										if (that.hobby !== that.UserMsgList.hobby) {
											that.updateUserDTO.hobby = that.UserMsgList.hobby
										}
										if (that.phoneNumber !== that.UserMsgList.userPhone) {
											that.updateUserDTO.userPhone = that.UserMsgList.userPhone
										}
										//省份、城市
										if (that.province !== that.UserMsgList.province) {
											that.updateUserDTO.province = that.UserMsgList.province
										}

										// that.updateUserDTO.province = that.province
										if (that.city !== that.UserMsgList.city) {
											that.updateUserDTO.city = that.UserMsgList.city
										}
										// that.updateUserDTO.city = that.city


										// 生日
										if (that.userBirthday !== that.UserMsgList.userBirthday) {
											that.updateUserDTO.userBirthday = that.birthDate
										}

										//头像
										if (that.imgUrlString !== '') {
											that.updateUserDTO.avatarurl = that.imgUrlString
										}
										//性别
										if (that.gender !== that.UserMsgList.gender && that.gender !== -1) {
											that.updateUserDTO.gender = that.gender
										}

										console.log(JSON.stringify(that.updateUserDTO))


										let res = await setUserInfo(that.updateUserDTO)
										console.log(res)

										uni.reLaunch({
											url: '/pages/mine/mine'
										})

									} catch (err) {
										console.error('Error updating user-msg ->', err);
									}

									console.log('用户点击了确认按钮');


								} else if (res.cancel) {


									console.log('用户点击了取消按钮');
								}
							}


						})

					} else {
						this.changeIndex = 1
						//点击 进行数据更改
					}


					console.log(this.changeIndex)
				},
				//获取用户信息
				async getUserInfoA() {
					console.log(this.$store.state.userInfo.wxtoken)
					try {
						let res = await getUserInfo();
						// 使用await等待异步函数的执行结果
						//将日期转换为字符串
						this.UserMsgList = res; // 将结果赋值给UserPuzzleList


						console.log(JSON.stringify(this.UserMsgList));

						this.gender = UserMsgList['gender'];
						this.nickname = UserMsgList['nickname'];
						this.phoneNumber = UserMsgList['userPhone'];
						this.hobby = UserMsgList['hobby'];
						this.province = UserMsgList['province'];
						this.city = UserMsgList['city'];
						this.userBirthday = UserMsgList['userBirthday'];
						this.avatarurl = UserMsgList['avatarurl'];
					} catch (error) {
						console.error('Error fetching user-msg list->', error);
					}

				},
				bindPickerBirth: function(e) {
					console.log(e.target.value)
					const date = e.target.value
					this.birthDate = date
				},
				bindPickerChange: function(event) {
					const provinceIndex = event.detail.value[0];
					const cityIndex = event.detail.value[2];
					console.log('provinceIndex=》' + provinceIndex)
					console.log('cityIndex=》' + cityIndex)

					this.UserMsgList.province = provinceIndex
					this.UserMsgList.city = cityIndex

				},
				pickerChange() {

				},
				formSubmit: function(e) {
					console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
					var formdata = e.detail.value
					uni.showModal({
						content: '表单数据内容：' + JSON.stringify(formdata),
						showCancel: false
					});
				},
				formReset: function(e) {
					console.log('清空数据')
				}
			}
		}
	</script>